<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/cart.css">
</head>

<body>
    <!-- 网页头部 -->
    <header class="header">
        <div class="header-content">
            <img class="logo" src="./images/logo.png" alt="">
            <div class="tool-bar"></div>
        </div>
    </header>
    <!-- 导航菜单 -->
    <div class="menu">
        <div class="menu-item">首页</div>
        <div class="menu-item">所有商品</div>
        <div class="menu-item">装饰摆件</div>
        <div class="menu-item">装饰摆件</div>
        <div class="menu-item">装饰摆件</div>
        <div class="menu-item">装饰摆件</div>
    </div>



    <main>
        <div class="cart-title flex-bt">
            <span>购物车</span>
            <img src="./images/cartTop01.png" alt="">
            <a href="#">继续购物</a>
        </div>

        <!-- 购物车表格 -->
        <table class="cart-table">
            <thead>
                <tr>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="cartList"></tbody>
        </table>
    </main>


    <!-- 产品服务 -->
    <div class="service">
        <div class="service-item">
            <div class="service-icon icon1"></div>
            <span>7天无理由退货</span>
        </div>
        <div class="service-item">
            <div class="service-icon icon2"></div>
            <span>7天无理由退货</span>
        </div>
        <div class="service-item">
            <div class="service-icon icon3"></div>
            <span>7天无理由退货</span>
        </div>
        <div class="service-item last-item">
            <div class="service-icon icon4"></div>
            <span>7天无理由退货</span>
        </div>
    </div>
    <!-- 网页底部 -->
    <footer class="footer">
        <p>蜗牛家居©2019-2021公司版权所有 京ICP备080100-xx号</p>
        <p>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
    </footer>

    <script src="./js/jquery-3.7.1.min.js"></script>
    <script src="./js/request.js"></script>

    <script>
        showCart();

        cartList.onclick = async function (e) {
            if (e.target.className == 'deleteBtn') {
                // 语法一：async await
                // try {
                //     const res = await removeCartData(e.target.dataset.id);
                //     if (res.code == 200) {
                //         alert("删除成功");
                //          showCart();
                //     }
                // } catch (error) {
                //     alert("删除失败，请刷新后重试。")
                // }

                // 语法二：then
                removeCartData(e.target.dataset.id)
                    .then((res) => {
                        if (res.code == 200) {
                            alert("删除成功");
                            showCart();
                        }
                    })
                    .catch(() => {
                        alert("删除失败，请刷新后重试。")
                    })
            }

            if (e.target.className.includes("countBtn")) {
                // 1. 测试事件是否绑定成功
                // console.log(1111);
                // 2. 查看标签身上的自定义属性是否绑定成功
                // console.log(e.target);
                const _id = e.target.dataset.id;
                let count = e.target.dataset.count - 0;

                if (e.target.className.includes("plusBtn")) {
                    count++;
                } else if (e.target.className.includes("minusBtn")) {
                    count--;
                }

                updateCartCount({
                    _id, count
                })
                    .then(res => {
                        if (res.code == 200) {
                            showCart();
                        }
                    })
                    .catch((err) => {
                        // console.log(2, err);
                    })
            }
        }






        async function showCart() {
            const res = await getCartData();
            cartRender(res.data.rows);
        }


        function cartRender(data) {
            cartList.innerHTML = data.map(item => {
                return (
                    `
                <tr>
                    <td>
                        <div class="product-info">
                            <input type="checkbox">
                            <img src="${item.productId?.list_image}" alt="">
                            <div>
                                <p>${item.productId?.name}</p>
                                <span>颜色分类：</span>
                                <div>
                                    <span>白色瓷瓶+白色串枚</span>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td>￥${item.productId?.price}</td>
                    <td>
                        <button class="countBtn minusBtn" data-id="${item._id}" data-count="${item.count}">-</button>
                        <span>${item.count}</span>
                        <button class="countBtn plusBtn" data-id="${item._id}" data-count="${item.count}">+</button>
                    </td>
                    <td>￥${item.count * item.productId?.price}</td>
                    <td><span class="deleteBtn" data-id="${item._id}">删除</span></td>
                </tr>
                    `
                )
            }).join('')
        }

    </script>
</body>

</html>